<template>
  <el-dialog
    title="新增文章"
    :visible="showText"
    width="100"
    :before-close="handleClose"
    @close="btnCancel"
  >
    <el-form :model="formRules" :rules="ruleSet">
      <el-form-item label="文章标题">
        <el-input placeholder="请输入文本标题" v-model="formRules.title"></el-input>
      </el-form-item>
      <el-form-item label="文本内容">
        <div class="edit_container" style="height: 350px;">
          <quill-editor
            style="height: 300px;"
            v-model="formRules.text"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
        </div>
      </el-form-item>
      <el-form-item label="视频地址">
        <el-input placeholder="视频地址" v-model="formRules.video"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="btnCancel">取 消</el-button>
      <el-button type="primary" @click="dialogVisible">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { quillEditor, update } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { add } from '../../api/hmmm/articles'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: '<a  href="http://www.cctv.com/">央视网</a>',
      editorOption: {
        modules: {
          // modules为自定义标题栏，使用默认的话可去掉modules
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 分别对应的是： 粗体，斜体，下划线，删除线
            ['blockquote', 'code-block'], //
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }], // 显示有序和无序列表
            [{ color: [] }, { background: [] }], // 显示背景字体颜色
            [{ font: [] }], // 显示字体选择
            [{ align: [] }], // 显示居中
            ['link'] // 显示超链接
          ]
        }
      },
      formRules: {
        title: '',
        text: '',
        video: ''
      },
      ruleSet: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        text: [{ required: true, message: '文本内容不能为空', trigger: 'blur' }],
        video: [{ required: true, message: '请输入有效地址', trigger: 'blur' }],
      }
    }
  },
  props: {
    showText: {
      type: Boolean,
      default: false
    },
    //子组件需要接收的值
    // getFatherData:{
    //     type:Object,
    //     required:true
		// 	}
  },
  methods: {
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    btnCancel() {
      this.$emit('update:showText', false)
    },
    //文本域添加文章
    async dialogVisible() {
      const data = await add({
        articleBody: this.formRules.title,
        title: this.formRules.text,
        videoURL: this.formRules.video
      })
      console.log(data)
      this.$parent.getArtilces() //子组件调用父组件的方法
      this.showText = false
      this. formRules.title = ''
      this. formRules.text = ''
      this. formRules.video = ''
    },
    //修改文章
     //修改 文章列表
  //   async alter(id) {
  //     this.showText = true
  //     const data = await update(id)
  //     console.log(data)
  //   }   
  },
  computed: {
    editor() {
      console.log(this.$refs.myQuillEditor.quill,)
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>
